<template>
  <d2-container class="page">
    <div class="page-table">
      <el-button type="primary" @click="onAdd">新增</el-button>
      <el-table :data="tableData"
                :loading="loading"
                :tree-props="treeProps"
                row-key="id"
                :indent="30"
                style="width: 100%">
        <el-table-column prop="name" label="组名"></el-table-column>
        <el-table-column prop="orderNum" label="排序号"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="small"
                       @click="onUpdate({index: scope.$index, row: scope.row})"
            >修改</el-button>
            <el-button type="danger" size="small"
                       @click="onDelete({index: scope.$index, row: scope.row})"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--新增-->
    <group-add
      v-if="visibleAdd"
      :visible="visibleAdd"
      @cancel="cancelAdd"
      @submit="submitAdd"
    />
    <!--修改-->
    <group-update
      v-if="visibleUpdate"
      :visible="visibleUpdate"
      :info="currRow"
      @cancel="cancelUpdate"
      @submit="submitUpdate"
    />
  </d2-container>
</template>

<script>
  import { mapActions } from 'vuex'
  import GroupAdd from './group-add'
  import GroupUpdate from './group-update'

  export default {
    name: 'group',
    data () {
      return {
        loading: false,
        tableData: [],
        treeProps: {
          children: 'list'
        },
        // add弹出层显示
        visibleAdd: false,
        visibleUpdate: false,
        currRow: null
      }
    },
    components: {
      GroupAdd,
      GroupUpdate
    },
    mounted () {
      this.queryList()
    },
    methods: {
      ...mapActions('d2admin/pm.group', [
        'groupList',
        'groupDelete',
        'groupTree'
      ]),
      // 查询列表
      queryList () {
        this.loading = true
        this.groupTree().then(res => {
          this.loading = false
          this.tableData = res
        }).catch(err => {
          this.loading = false
        })
      },
      // 新增
      onAdd () {
        this.visibleAdd = true
      },
      // 修改
      onUpdate ({ index, row }) {
        this.currRow = row
        this.visibleUpdate = true
      },
      // 删除
      onDelete ({ index, row }) {
        this.$confirm('您确定删除吗？', '提示').then(res => {
          this.groupDelete({
            id: row.id
          }).then(res => {
            this.queryList()
          })
        }).catch(err => {})
      },
      // 取消新增操作
      cancelAdd (visible) {
        this.visibleAdd = visible
      },
      // 提交新增操作
      submitAdd (visible) {
        this.visibleAdd = visible
        this.queryList()
      },
      // 取消修改操作
      cancelUpdate (visible) {
        this.visibleUpdate = visible
      },
      // 提交修改操作
      submitUpdate (visible) {
        this.visibleUpdate = visible
        this.queryList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    .page-form {
      border: 1px solid #eee;
      padding: 20px 20px 0;
    }
    .page-table {
      border: 1px solid #eee;
      padding: 20px;
      margin-top: 20px;
    }
  }
</style>
